<template>
  <div class="add-form">
    <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
      <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="图书类别" prop="type">
              <el-input v-model="formData.type"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图书名称" prop="name">
              <el-input v-model="formData.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="作者">
              <el-input v-model="formData.author" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出版社" prop="publishingHouse">
              <el-input v-model="formData.publishingHouse"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买次数" prop="buyNumber">
              <el-input v-model="formData.buyNumber"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="addData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'bookadd',
  data () {
    return {
      formData: {},
      dialogFormVisible: false,
      rules: { // 校验规则
        type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
      }
    }
  },
  methods: {
    addData: function () {
      this.$axios.post('/books', this.formData).then((res) => {
        // 判断当前操作是否成功
        if (res.data.flag) {
          // 1.关闭弹层
          this.dialogFormVisible = false
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }).finally(() => {
        // 2.重新加载数据
        this.getAll()
      })
    },
    cancel: function () {
      this.dialogFormVisible = false
      this.$message.info('当前操作取消')
    },
    // 重置表单
    resetForm: function () {
      this.formData = {}
    }
  }
}
</script>

<style scoped>

</style>
